Make titlebuttons round
authorfrederik.feichtmeier <frederik.feichtmeier@gmail.com>
Thu, 1 Aug 2019 14:09:52 +0000 (10:09 -0400)
committerTimm Bäder <mail@baedert.org>
Wed, 7 Aug 2019 16:46:47 +0000 (18:46 +0200)
- use even sides for the titlebuttons so the result is a circle and not an ellipse
- add maximum border radius
- set min width/height to 0
- adjust margin and padding to match the previous look

gtk/theme/Adwaita/_common.scss
gtk/theme/Adwaita/gtk-contained-dark.css
gtk/theme/Adwaita/gtk-contained.css

index ab2c2a9a5287d6cd09448c35c50227d031c1df6c..89942df10db8589f46e503d845e561bbb499d88e 100644 (file)
@@ -4515,6 +4515,12 @@ button.titlebutton {
 
   @include _button_text_shadow;
 
+  border-radius: 9999px;
+  padding: 6px;
+  margin: 0 2px;
+  min-width: 0;
+  min-height: 0;
+
   .selection-mode & {
     @extend %button.flat.suggested-action;
 
index 930b0b8aeea617d8b592eb15642e5ca59824fcd5..7f7583b7fb7d30fc16794f1d9e3c1a87e721bcfb 100644 (file)
@@ -1956,7 +1956,7 @@ messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0,
 
 .solid-csd decoration:backdrop { box-shadow: inset 0 0 0 3px #353535, inset 0 1px rgba(238, 238, 236, 0.07); }
 
-button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); }
+button.titlebutton { text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); border-radius: 9999px; padding: 6px; margin: 0 2px; min-width: 0; min-height: 0; }
 
 button.titlebutton:backdrop { -gtk-icon-shadow: none; }
 
index 4268e90fee8e8199c84a5a490ce0a71988a096d3..85185dd796950695bf81534bbb9cb752756534f6 100644 (file)
@@ -1972,7 +1972,7 @@ messagedialog.csd decoration { border-radius: 8px; box-shadow: 0 1px 2px rgba(0,
 
 .solid-csd decoration:backdrop { box-shadow: inset 0 0 0 3px #f6f5f4, inset 0 1px rgba(255, 255, 255, 0.8); }
 
-button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); }
+button.titlebutton { text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); border-radius: 9999px; padding: 6px; margin: 0 2px; min-width: 0; min-height: 0; }
 
 button.titlebutton:backdrop { -gtk-icon-shadow: none; }